<template>
	<movable-area
		class="movableArea"
		:style="{
			height: areaHeight + '%',
		}"
	>
		<movable-view
			class="movableView"
			:position="position"
			:x="x"
			:y="y"
			:direction="direction"
			:damping="damping"
			@change="onChange"
			@touchend="onTouchend"
			@click="next"
		>
			<slot />
		</movable-view>
	</movable-area>
</template>
<script>
	export default {
		name: 'movable',
		data() {
			return {
				x: uni.upx2px(640),
				y: 300,
				x1: 0,
				x2: 0,
				y1: 0,
				y2: 0,
				move: {
					x: 0,
					y: 0,
				},
			};
		},
		props: {
			damping: {
				type: Number,
				default: 10,
			},
			direction: {
				type: String,
				default: 'all',
			},
			position: {
				type: Number,
				default: 4,
			},
			move_x: {
				type: Number,
				default: 60,
			},
			areaHeight: {
				type: Number,
				default: 80,
			},
		},
		mounted() {
			uni.getSystemInfo({
				success: (res) => {
					this.x1 = 0;
					this.x2 = parseInt(res.windowWidth) - this.move_x;
					this.y1 = 0;
					this.y2 = parseInt(res.windowHeight) - 100;
					setTimeout(() => {
						if (this.position == 1 || this.position == 2) this.y = parseInt(this.y2 * 0.2);
						if (this.position == 3 || this.position == 4) this.y = parseInt(this.y2 * 0.8);
						if (this.position == 1 || this.position == 3) this.x = parseInt(this.x1);
						if (this.position == 2 || this.position == 4) this.x = parseInt(this.x2);
						this.move.x = this.x;
						this.move.y = this.y;
						console.log('move', this.move);
					}, 1000);
				},
			});
		},
		methods: {
			onChange(e) {
				if (e.detail.source === 'touch') {
					this.move.x = e.detail.x;
					this.move.y = e.detail.y;
				}
			},
			onTouchend() {
				this.x = this.move.x;
				this.y = this.move.y;
				setTimeout(() => {
					if (this.move.x < this.x2 / 2) this.x = this.x1;
					else this.x = this.x2;
					console.log(this.move.x, this.x2, this.x, this.y);
				}, 100);
			},
			next() {
				this.$emit('next');
			},
		},
	};
</script>

<style lang="scss">
	.movableArea {
		position: fixed;
		top: 45%;
		transform: translateY(-50%);
		left: 0;
		width: 100%;
		height: 80%;
		pointer-events: none; //设置area元素不可点击，则事件便会下移至页面下层元素
		z-index: 999;
		.movableView {
			pointer-events: auto; //可以点击
			position: relative;
			border-radius: 100%;

			.iconImage {
				display: block;
				width: 120rpx;
				height: 120rpx;
				// animation: iconImage 5s linear infinite;
			}

			@keyframes iconImage {
				0% {
					-webkit-transform: rotate(0deg);
				}

				25% {
					-webkit-transform: rotate(90deg);
				}

				50% {
					-webkit-transform: rotate(180deg);
				}

				75% {
					-webkit-transform: rotate(270deg);
				}

				100% {
					-webkit-transform: rotate(360deg);
				}
			}

			.contact {
				width: 50px;
				height: 50px;
				overflow: hidden;
				position: absolute;
				right: 10%;
				top: 50%;
				border-radius: 100%;
				opacity: 0;
			}
		}
	}
</style>
